<template>
    <view class="home">
        <!-- <back></back> -->
        <view class="top u-flex u-row-between">
            <view class="title">个人信息修改</view>
        </view>
        <view class="item it_flex" @click="upshopImg">
            <view class="it_left">店铺头像</view>
            <image
                :src="avatar ? BaseUrl + avatar : '../../static/logo.png'"
                mode=""
                class="haedimg"
            ></image>
        </view>
        <view class="item it_flex">
            <view class="it_left">店铺昵称</view>
            <input type="text" placeholder="请输入昵称" v-model="shopname" />
        </view>
        <view class="item it_flex">
            <view class="it_left">手机号</view>
            <input
                type="number"
                maxlength="11"
                placeholder="请输入手机号"
                v-model="mobile"
            />
        </view>
        <view class="item it_flex">
            <view class="it_left">联系人</view>
            <input type="text" placeholder="请输入联系人" v-model="sendName" />
        </view>
        <view class="item it_flex">
            <view class="it_left">地址</view>
            <input type="text" placeholder="请输入地址" v-model="sendAddr" />
        </view>
        <view class="item">
            <view class="it_left">简介</view>
            <textarea
                name=""
                id=""
                cols="30"
                rows="10"
                v-model="bio"
            ></textarea>
        </view>
        <view class="add btn u-flex-center" @click="getSubmit()">确认修改</view>
    </view>
</template>

<script>
import { BaseUrl } from "@/utils/req";

export default {
    data() {
        return {
            BaseUrl,
            avatar: "",
            shopname: "",
            mobile: "",
            sendName: "",
            sendAddr: "",
            bio: "",
        };
    },
    onReady() {
        this.$u.post("/api/shop/shop_details", {}).then((res) => {
            if (res.code == 1) {
                this.avatar = res.data.avatar;
                this.shopname = res.data.shopname;
                this.mobile = res.data.mobile;
                this.sendName = res.data.sendName;
                this.sendAddr = res.data.sendAddr;
                this.bio = res.data.bio;
            }
        });
    },
    methods: {
        upshopImg() {
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ["original", "compressed"],
                sourceType: ["album"],
                success: (res) => {
                    if (res.tempFilePaths.length) {
                        uni.uploadFile({
                            url: BaseUrl + "/api/common/upload",
                            filePath: res.tempFilePaths[0],
                            name: "file",
                            header: {
                                token: uni.getStorageSync("token"),
                                "content-type": "multipart/form-data",
                            },
                            formData: {
                                user: "test",
                            },
                            success: (res) => {
                                this.avatar = JSON.parse(res.data).data.url;
                            },
                        });
                        // uni.uploadFile({
                        //     url: "https://same.ascetic.top/api/common/upload", //仅为示例，非真实的接口地址
                        //     filePath: res.tempFilePaths[0],
                        //     name: "file",
                        //     formData: {
                        //         user: "test",
                        //     },
                        //     success: (res) => {
                        //         this.avatar = JSON.parse(res.data).data.fullurl;
                        //     },
                        // });
                    }
                },
            });
        },
        getSubmit() {
            this.$u
                .post("/api/shop/edit_shop_details", {
                    avatar: this.avatar,
                    shopname: this.shopname,
                    mobile: this.mobile,
                    sendName: this.sendName,
                    sendAddr: this.sendAddr,
                    bio: this.bio,
                })
                .then((res) => {
                    if (res.code == 1) {
                        uni.showModal({
                            title: "修改成功",
                            showCancel: false,
                            success() {
                                uni.redirectTo({
                                    url: "/wNew/pages/mine",
                                });
                            },
                        });
                        this.$u
                            .post("/api/shop/shop_details", {})
                            .then((res) => {
                                if (res.code == 1) {
                                    this.avatar = res.data.avatar;
                                    this.shopname = res.data.shopname;
                                    this.mobile = res.data.mobile;
                                    this.sendName = res.data.sendName;
                                    this.sendAddr = res.data.sendAddr;
                                    this.bio = res.data.bio;
                                }
                            });
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: "none",
                        });
                    }
                });
        },
    },
};
</script>

<style>
page {
    width: 100%;
    padding: 0 33rpx;
    box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
.top {
    padding: 30rpx 0;

    .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }

    .radius {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        margin-right: 10rpx;
        border: 1rpx solid #888;
    }

    .rad_css {
        background: #606dce;
        border: 1rpx solid #606dce;
    }

    .grey {
        color: #333;
        font-size: 28rpx;
    }
}
.haedimg {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
}
.it_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item_pad_bot {
    padding-bottom: 10rpx !important;
}

.item {
    padding: 32rpx 30rpx;
    background: #fff;
    font-size: 28rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;

    .it_left {
        font-weight: bold;
        color: #222;
    }

    input {
        font-size: 28rpx;
        text-align: right;
    }

    .it_right {
        display: flex;
        align-items: center;

        text {
            color: #222;
        }

        .it_lef_img {
            width: 10rpx;
            height: 20rpx;
            margin-left: 10rpx;
        }

        .it_rig_img {
            width: 220rpx;
            height: 220rpx;
            border-radius: 20rpx;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
        }
    }

    .it_right_duo {
        border-bottom: 1rpx solid #dfdfdf;

        &:last-child {
            border: none;
        }
    }

    .it_tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 30rpx;
        margin-bottom: 30rpx;
        border-bottom: 1rpx solid #f5f5f5;

        .it_grey {
            font-size: 28rpx;
            color: #888;

            image {
                width: 28rpx;
                height: 28rpx;
                margin-right: 10rpx;
            }
        }

        input {
            font-size: 28rpx;
            font-weight: bold;
            text-align: left;
        }
    }

    .it_specs {
        color: #222;
        display: flex;
        font-size: 24rpx;
        align-items: center;
        padding: 10rpx 24rpx;
        background: #f5f5f5;
        border-radius: 26rpx;
        margin-right: 30rpx;
        margin-bottom: 20rpx;

        .it_sp_line {
            width: 2rpx;
            height: 24rpx;
            margin: 0 20rpx 0 24rpx;
        }

        .it_sp_cha {
            width: 20rpx;
            height: 20rpx;
        }

        .it_sp_plus {
            width: 20rpx;
            height: 20rpx;
            margin-right: 20rpx;
        }

        .it_sp_gre {
            color: #606dce;
        }
    }

    .it_specs input {
        flex: 1;
        max-width: 60rpx;
    }

    .it_pri {
        font-size: 24rpx;
        color: #222;
        padding: 10rpx 48rpx;
        background: #f5f5f5;
        border-radius: 26rpx;
        margin-right: 30rpx;
    }

    .it_ban {
        width: 50%;
        padding: 30rpx 0;

        input {
            flex: 1;
            text-align: left;
            margin-left: 20rpx;
        }
    }
}

.add {
    width: 200rpx;
    height: 60rpx;
    font-size: 28rpx;
    color: #fff;
    margin: 0 auto;
    margin-top: 30rpx;
    background: linear-gradient(135deg, #2bb984 0%, #8cd994 100%);
    border-radius: 40rpx;
}

.btn {
    width: 630rpx;
    height: 80rpx;
    margin-top: 157rpx;
}

.layer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.layer-content {
}

/* 浮层内容 */
.confirm-bar {
    position: fixed;
    bottom: 600rpx;
    left: 0;
    width: 750rpx;
}

.line-height-80 {
    height: 80rpx;
    line-height: 80rpx;
}

.padding-lr-30 {
    padding-left: 30rpx;
    padding-right: 30rpx;
}

.bg-ff {
    background: #fff;
}

.border-bottom-ed {
    border-bottom: 1rpx solid #ededed;
}

.flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.picker-view {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 600rpx;
    background: #fff;
}

.item-pircker {
    line-height: 80rpx;
    height: 80rpx;
    align-items: center;
    justify-content: center;
    text-align: center;
}
textarea {
    margin-top: 20rpx;
    font-size: 28rpx;
    width: 100%;
}
</style>
